<template>
	<view class="content">
		<view class="u-flex u-flex-col u-row-center u-col-center">
			<image src="/static/img/logo.png" style="width: 160rpx;height: 160rpx;margin-top: 80rpx"></image>
			<view class="u-m-t-40 u-m-b-80 u-font-xl">健康直通车</view>
		</view>
		<view class="login-box u-flex u-flex-col">
			<view class="login-ipt u-flex u-row-left u-col-center" style="width: 100%;">
				<view class="u-flex u-row-left u-col-center u-m-r-10" style="width:20%;">
					<image class="u-m-r-10" style="width: 26rpx;height: 26rpx" src="/static/img/renwu.png"></image>
					<view>账号:</view>
				</view>
				<input type="text" style="width: 80%;" v-model="username_client" placeholder="请输入用户名"/>
			</view>
			<view class="login-ipt u-flex u-row-left u-col-center" style="width: 100%;">
				<view class="u-flex u-row-left u-col-center u-m-r-10"style="width:20%;">
					<image class="u-m-r-10" style="width: 26rpx;height: 26rpx" src="/static/img/suo.png"></image>
					<view>密码:</view>
				</view>
				<input type="password" style="width: 80%;" v-model="password_client" placeholder="请输入密码"/>
			</view>
			<view class="ok-box"><button type="default" class="ok-btn" @click="login()">登录系统</button></view>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			username_client: '',
			password_client: '',
			code:'',
			state:'',
			isWeixin:false,
			appid:null
		};
	},
	onLoad(options) {
		if(options&&options.appid){
			this.appid = options.appid
		}
		this.isWeixin = this.isWechat()
		if(this.isWeixin){
			this.checkWeChatCode();
		}
	},
	methods: {
		...mapMutations(['in_login']),
		/*微信登录相关  start*/
		//方法：用来判断是否是微信内置的浏览器
		isWechat() {
			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
		},
		//方法:用来提取code
		getUrlCode(name) {
			return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
				.replace(/\+/g, '%20')) || uni.getStorageSync("code")|| null
		},
		//检查浏览器地址栏中微信接口返回的code
		checkWeChatCode() {
			let code = this.getUrlCode('code')
			this.code = code;
			if (code) {
				uni.setStorageSync("code",code);
			}else{
				this.getWeChatCode();
			}
		},
		login(){
			if(this.isWeixin){
				this.getLogin(this.code);;//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
			}else{
				this.getLogin("");
			}
		},
		//请求微信接口，用来获取code
		getWeChatCode() {
			let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
			let appid = this.appid||'wx55694bdab2bb72cf'
			
			//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
			window.location.href =
				"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
				appid +
				"&redirect_uri=" +
				local +
				"&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect";
		},
		//登录
		async getLogin(value){
			let account = '';
			let password = '';
			
			account = this.username_client;
			password = this.password_client;
			
			let formData = {
				account,
				password,
				code:value,
				appid:this.appid||'wx55694bdab2bb72cf'
			};
			this.$api('user.login', formData).then(res => {
				if (res.code == 1) {
					uni.setStorageSync('token', res.data.userinfo.token);
					uni.removeStorageSync("chooseType");
					this.in_login(res.data.userinfo);
					this.jump('/', { from: 'login'});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.content {
	padding: 30rpx;
	background-color: #ffffff;
}
.login-ipt {
	border: 1rpx solid #eeeeee;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #ffffff;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
}
.ok-box {
	padding: 0;
	.ok-btn {
		margin-bottom: 20rpx;
		background: #009AC4;
	}
}
.login-box {
	margin-bottom: 100rpx;
}
</style>
